import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { FileSearchOutlined } from '@ant-design/icons'
import style from './DocLabel.module.less'
import DocModal from './DocModal'

function DocLabel ({ label, textTemp, varKey, paramFormKeyMap, formRef }) {
  const [visible, setVisible] = useState(false)
  return (
    <span>
      <span>{label}</span>
      <span className={style['label-btn']} onClick={() => setVisible(true)}><FileSearchOutlined /></span>
      <DocModal visible={visible} onHide={() => setVisible(false)} textTemp={textTemp} varKey={varKey} paramFormKeyMap={paramFormKeyMap} formRef={formRef} />
    </span>
  )
}

DocLabel.proptypes = {
  varKey: PropTypes.string,
  paramFormKeyMap: PropTypes.object,
  label: PropTypes.string,
  textTemp: PropTypes.array,
  formRef: PropTypes.object
}

DocLabel.defaultProps = {
  varKey: '',
  paramFormKeyMap: {},
  label: '',
  textTemp: [],
  formRef: null
}

export default DocLabel
